<template>
  <div id="main">
    <el-config-provider :size="size" :z-index="zIndex">
      <el-container>
        <div class="box">
          <el-aside width="aoto" style="height: 100vh">
            <el-scrollbar style="heigth: 100vh">
              <!-- 左侧菜单组件 -->
              <TreeMenu :is-collapse="isCollapse" />
            </el-scrollbar>
          </el-aside>
        </div>
        <el-container>
          <el-header>
            <!-- 面包屑和菜单折叠 -->
            <el-row>
              <el-col :span="12">
                <HeaderBreadcrumb @receive-Collapse="isCollapse = $event" />
              </el-col>
              <el-col :span="12">
                <div class="tool-box">
                  <div></div>
                  <div class="tool-all">
                    <!-- 间距组件,避免重复使用Divider组件 -->
                    <el-space spacer="|" :size="size2">
                      <FullScreen></FullScreen>
                      <!-- 全屏 -->
                      <ComponentSize @choneommandSize="size = $event"></ComponentSize>
                      <!-- 组件字体大小 -->
                      <ThemPicker size="default"></ThemPicker>
                      <!-- 颜色 -->
                      <ChineseEnglish></ChineseEnglish>
                      <!-- 中英切换 -->
                      <UserInfo></UserInfo>
                      <!-- 个人信息 -->
                    </el-space>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 面包屑和菜单折叠 -->
          </el-header>
          <div>
            <HeaderTags />
          </div>
          <el-main>
            <router-view> </router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
// import TreeMenu from "@/components/navigation/TreeMenu.vue";
// import HeaderBreadcrumb from "@/components/navigation/HeaderBreadcrumb.vue";
// import HeaderTags from "@/components/navigation/HeaderTags.vue";

// import FullScreen from "../components/specialfunctions/FullScreen.vue"; //全屏
// import ComponentSize from "../components/specialfunctions/ComponentSize.vue"; //组件字体大小
// import ChineseEnglish from "../components/specialfunctions/ChineseEnglish.vue"; //中文英文切换
// import UserInfo from "../components/navigation/UserInfo.vue"; //个人信息

import { ElConfigProvider } from "element-plus";
import { ref } from "vue";
const isCollapse = ref(false); //控制菜单栏折叠
const size = ref("default"); //组件字体大小
const zIndex = ref(3000);
const size2 = ref(15);

size.value = localStorage.getItem("size");

// const receiveCollapse = (data: boolean) => {
//   isCollapse.value = data;
//   console.log(data);

// };
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
  position: absolute;
  
  .el-container {
    height: 100%;
    .el-container {
      height: 100vh;
      .el-header {
        .el-row {
          height: 100%;

          .tool-box {
            display: flex;
            height: 100%;
            justify-content: space-between;

            .tool-all {
              display: flex;
              align-items: center;
            }
          }
        }
      }

      .el-main {
      
      }

      .el-footer {
        background-color: blueviolet;
      }
    }
  }

  .box {

    // 左侧菜单
    .el-scrollbar {
      .el-aside {
        height: 100vh;
        overflow-x: hidden;
      }
    }
  }
}

/* 设置滚动条的样式 */
.el-main::-webkit-scrollbar {
  width: 10px;
}

/* 滚动条滑块 */
.el-main::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

.el-main::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
</style>
